<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/messagebox/messageBox.js" charset="utf-8"></script>
<div id="messageBox">
	<div title="API">
		<div>
			<h2>Ccay.UI.showMessage(content, style, callback, hideClose, encode,dialogOp)</h2>
			<h3>作用：MessageBox 提示弹出框控件接口。参数也可以以对象的形式进行传递</h3>

			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>

						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>

						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="content"></samp> <span class="ccay-form-input">
								{String}
								<p>content：内容.
						</span></li>

						<li class="ccay-form-row"><samp class="i18n" i18nKey="type"></samp>
							<span class="ccay-form-input"> {String}
								<p>type： 内容(取值：success|error|warn|question).
						</span></li>
						
						<li class="ccay-form-row"><samp class="i18n" i18nKey="callback"></samp>
							<span class="ccay-form-input"> {function}
								<p>callback： 回调函数，点击“确定” 和 点击关闭图标的时候执行.
						</span></li>
						
						<li class="ccay-form-row"><samp class="i18n" i18nKey="hideClose"></samp>
							<span class="ccay-form-input"> {boolean}
								<p>hideClose： 是否隐藏消息的关闭图标按钮，true为隐藏关闭图标，任何类型的showMessage都可使用。
						</span></li>
						
						<li class="ccay-form-row"><samp class="i18n" i18nKey="encode"></samp>
							<span class="ccay-form-input"> {boolean}
								<p>是否转码显示
						</span></li>
						
						<li class="ccay-form-row"><samp class="i18n" i18nKey="dialogOp"></samp>
							<span class="ccay-form-input"> {boolean}
								<p>dialog 参数设置，如left、top 等
						</span></li>
					</ul>
				</div>
			</form>
			
			<h2>Ccay.UI.confirm(content, callback,focusYes)</h2>
			<h3>作用：确认是否操作提示弹出框控件接口</h3>

			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>

						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>

						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="content"></samp> <span class="ccay-form-input">
								{String}
								<p>content：内容.
						</span></li>

						<li class="ccay-form-row"><samp class="i18n" i18nKey="callback"></samp>
							<span class="ccay-form-input"> {function}
								<p>callback： 回调函数，点击“确定”或“取消”的时候执行，点击关闭图标执行“取消”的事件.
						</span></li>
						
						<li class="ccay-form-row"><samp class="i18n" i18nKey="focusYes"></samp>
							<span class="ccay-form-input"> {boolean}
								<p>focusYes： 是否使焦点在确认按钮上.</font>
						</span></li>
					</ul>
				</div>
			</form>
			
		</div>
	</div>
	<div title="Demo">
		<h4><span>样例1：showMessage无指定类型的message提示</span></h4>
			<div style='padding-left:30px'>
			<div class="demo"><input type="button" onclick="Ccay.UI.showMessage('无指定类型的message提示')" value="message1" /></div>
			
			<h3>实现代码：</h3>
			<div class="codeArea">
	             	<label id="html1">&lt;input type="button" onclick="Ccay.UI.showMessage('无指定类型的message提示')" value="message1" /></label>  
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#messageBox','',$('#html1').html())">亲自试一试</a>
			</div>
		</div>
		<h4><span>样例2：showMessage操作成功提示</span></h4>
			<div style='padding-left:30px'>
			<div class="demo"><input type="button" onclick="Ccay.UI.showMessage('操作成功','success',null,true)" value="message2" /></div>
			
			<h3>实现代码：</h3>
			<div class="codeArea">
	             	<label id="html2">&lt;input type="button" onclick="Ccay.UI.showMessage('操作成功','success',null,true)" value="message2" /></label>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#messageBox','',$('#html2').html())">亲自试一试</a>
			</div>
		</div>
		<h4><span>样例3：showMessage操作失败提示</span></h4>
			<div style='padding-left:30px'>
			<div class="demo"><input type="button" onclick="Ccay.UI.showMessage('操作错误','error')" value="message3" /></div>
			
			<h3>实现代码：</h3>
			<div class="codeArea">
	             	<label id="html3">&lt;input type="button" onclick="Ccay.UI.showMessage('操作错误','error')" value="message3" /></label>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#messageBox','',$('#html3').html())">亲自试一试</a>
			</div>
		</div>
		<h4><span>样例4：showMessage问题提示框</span></h4>
			<div style='padding-left:30px'>
			<div class="demo"><input type="button" onclick="Ccay.UI.showMessage('提示内容','question')" value="message4" /></div>
			
			<h3>实现代码：</h3>
			<div class="codeArea">
	             	 <label id="html4">&lt;input type="button" onclick="Ccay.UI.showMessage('提示内容','question')" value="message4" /></label>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#messageBox','',$('#html4').html())">亲自试一试</a>
			</div>
		</div>

		<h4><span>样例5：showMessage回调函数</span></h4>
			<div style='padding-left:30px'>
			<font color = "red">说明：点击确定可执行回调，点击关闭按钮也执行回调（若不设置关闭隐藏）</font>
			<div class="demo"><input type="button" onclick="Ccay.UI.showMessage('提示内容','question',Ccay.example.ui.messageBox.callback)" value="显示关闭图标" /></div>
			<div class="demo"><input type="button" onclick="Ccay.UI.showMessage('提示内容','question',Ccay.example.ui.messageBox.callback,true)" value="不显示关闭图标" /></div>
			<h3>实现代码：</h3>
			<div class="codeArea">
	             	<label id="html51">&lt;input type="button" onclick="Ccay.UI.showMessage('提示内容','question',Ccay.example.ui.messageBox.callback)" value="显示关闭图标" /></label>
	             	<p><label id="html5">&lt;input type="button" onclick="Ccay.UI.showMessage('提示内容','question',Ccay.example.ui.messageBox.callback,true)" value="不显示关闭图标" /></label>
			</div>
			<div class="codeArea">
	             	<pre id="js5">page.callback = function(){
  Ccay.UI.topBox("我是回调函数哦！");
}</pre>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#messageBox',$('#js5').html(),$('#html5').html())">亲自试一试</a>
			</div>
		</div>
		<h4><span>样例6：Confirm确认操作提示框</span></h4>
			<div style='padding-left:30px'>
			<font color = "red">说明：点击“确定”或“取消”可执行定义的执行事件，点击关闭图标可执行“取消”操作的事件</font>
			<div class="demo"><input type="button" onclick="Ccay.UI.confirm('是否要进行操作',function(yesBtn){if(yesBtn){alert('Yes');}else{alert('No');}})" value="message6" /></div>
			
			<h3>实现代码：</h3>
			<div class="codeArea">
	             	<label id="html6">&lt;input type="button" onclick="Ccay.UI.confirm('是否要进行操作',function(yesBtn){if(yesBtn){alert('Yes');}else{alert('No');}})" value="message6" /></label>
			</div>
			<div class='try'>
				<a onclick="Ccay.example.openTry('#messageBox','',$('#html6').html())">亲自试一试</a>
			</div>
		</div>
	</div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
	    <ul>
	    </ul>
		</div>     
		<div class="ccay-form-custom">
		    <ul>                     
		        <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
		</div>
	  </form>                    
	</div>
</div>